<template>
    <div class="tabbox">
        <!-- 渲染多个分类按钮 -->
        <div class="tab" :class="{active: currentIndex==index }" @click="$emit('deliverIndex',index)" v-for="(item,index) in tabs" :key="index">{{item.tabName}}</div>
    </div>
</template>

<script>
export default {
    // 通过props接收从父组件传来的值，该值是只读的(不能修改)
    // props:['tabs','currentIndex']//数组形式
    props:{//对象形式，可以对传来的数据进行类型验证
        tabs:{type:Array,default:[]},//default是默认值
        currentIndex:{type:Number,default:0},
    }

}
</script>

<style lang='scss' scoped>
.tabbox{
  width: 60px;
  text-align: center;
}
.tabbox .tab{
  margin: 15px 0;
  border-left: 3px solid transparent;
}
.tabbox .tab.active{
  font-weight: bold;
  border-left: 3px solid red;
}
</style>